import React from 'react';
import { Check, X as XIcon } from 'lucide-react';
import { Question } from '../../types';

interface QuestionNavProps {
  questions: Question[];
  activeId: string;
  onClick: (index: number) => void;
  statuses?: Record<string, boolean>;
  userAnswers: Map<string, string | string[]>;
}

export const QuestionNav: React.FC<QuestionNavProps> = ({
  questions,
  activeId,
  onClick,
  statuses,
  userAnswers
}) => {
  // Define Groups
  const groups = [
    {
      id: 'judge',
      label: '判断题',
      filter: (q: Question) => q.type === 'judge'
    },
    {
      id: 'single',
      label: '单选题',
      filter: (q: Question) => q.type === 'choice' && !Array.isArray(q.correctAnswer)
    },
    {
      id: 'multi',
      label: '多选题',
      filter: (q: Question) => q.type === 'choice' && Array.isArray(q.correctAnswer)
    }
  ];

  // Create a map of original index to question for onClick
  const questionsWithIndex = questions.map((q: Question, idx: number) => ({
    ...q,
    originalIndex: idx
  }));

  return (
    <div className="space-y-6 pb-10">
      {groups.map((group) => {
        const groupQuestions = questionsWithIndex.filter(group.filter);
        if (groupQuestions.length === 0) return null;

        return (
          <div key={group.id}>
            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 px-1 flex items-center gap-2">
              <span className="w-1 h-4 bg-slate-300 rounded-full"></span>
              {group.label}
            </h3>
            <div className="grid grid-cols-5 gap-2">
              {groupQuestions.map((q: any, index: number) => {
                const status = statuses ? statuses[q.id] : undefined;
                const isAnswered =
                  userAnswers.has(q.id) &&
                  (Array.isArray(userAnswers.get(q.id))
                    ? (userAnswers.get(q.id) as string[]).length > 0
                    : true);
                const isActive = activeId === q.id;

                let btnClass =
                  'relative h-10 w-10 rounded-xl flex items-center justify-center text-sm font-bold transition-all duration-200 border-2 ';

                if (status !== undefined) {
                  // Result/Review View
                  if (status === true) {
                    btnClass += isActive
                      ? 'bg-green-600 border-green-600 text-white shadow-md'
                      : 'bg-green-50 border-green-200 text-green-700';
                  } else {
                    btnClass += isActive
                      ? 'bg-red-500 border-red-500 text-white shadow-md'
                      : 'bg-red-50 border-red-200 text-red-700';
                  }
                } else {
                  // Exam View
                  if (isActive) {
                    btnClass +=
                      'bg-primary border-primary text-white shadow-lg shadow-primary/30 scale-110 z-10';
                  } else if (isAnswered) {
                    btnClass += 'bg-indigo-50 border-indigo-200 text-primary';
                  } else {
                    btnClass +=
                      'bg-white border-slate-100 text-slate-400 hover:border-indigo-200 hover:text-indigo-400';
                  }
                }

                return (
                  <button
                    key={q.id}
                    onClick={() => onClick(q.originalIndex)}
                    className={btnClass}
                  >
                    {index + 1}

                    {/* Status Icon (Only in review mode) */}
                    {status !== undefined && (
                      <div
                        className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center border-2 border-white shadow-sm ${
                          status ? 'bg-green-500' : 'bg-red-500'
                        }`}
                      >
                        {status ? (
                          <Check size={10} className="text-white" strokeWidth={4} />
                        ) : (
                          <XIcon size={10} className="text-white" strokeWidth={4} />
                        )}
                      </div>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};